<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>签到表</title>
    <script src="/static/js/plugins/echarts/echarts-all.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 770px;height:580px;"></div>
<script type="text/javascript">


   // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));

   // 指定图表的配置项和数据
   var option = {
       title : {
           text : '销售报表',
           subtext : '${groupBy}',
           x : 'center'
       },
       tooltip : {
           trigger : 'axis'
       },
       legend : {
           data : [ '销售总额' ],
           x : 'left'
       },
       toolbox : {
           show : true,
           feature : {
               mark : {
                   show : true
               },
               dataView : {
                   show : true,
                   readOnly : false
               },
               magicType : {
                   show : true,
                   type : [ 'line', 'bar' ]
               },
               restore : {
                   show : true
               },
               saveAsImage : {
                   show : true
               }
           }
       },
       calculable : true,
       xAxis : [ {
           type : 'category',
           data : ${x}
       } ],
       yAxis : [ {
           type : 'value'
       } ],
       series : [ {
           name : '销售总额',
           type : 'bar',
           data : ${y},
           markPoint : {
               data : [ {
                   type : 'max',
                   name : '最大值'
               }, {
                   type : 'min',
                   name : '最小值'
               } ]
           },
           markLine : {
               data : [ {
                   type : 'average',
                   name : '平均值'
               } ]
           }
       } ]
   };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>


</body>
</html>